<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">
	<style>
		a:not(.active) {
			color: inherit;
		}
	</style>
</head>

<body>
	<section class="container">
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">导航</h5>
			</div>
			<div class="card-body">
				<ul class="nav">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">导航对齐方式</h5>
			</div>
			<div class="card-body">
				<p>左对齐导航 (默认):</p>
				<ul class="nav">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<p class="text-center">居中对齐导航:</p>
				<ul class="nav justify-content-center">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<p class="text-right">右对齐导航:</p>
				<ul class="nav justify-content-end">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<p>垂直导航:</p>
				<ul class="nav flex-column">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">选项卡</h5>
			</div>
			<div class="card-body">
				<p>选项卡导航:</p>
				<ul class="nav nav-tabs mb-3">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<p>胶囊导航:</p>
				<ul class="nav nav-pills">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">导航等宽</h5>
			</div>
			<div class="card-body">
				<ul class="nav nav-pills nav-justified mb-3">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<ul class="nav nav-tabs nav-justified">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">下拉菜单</h5>
			</div>
			<div class="card-body">
				<ul class="nav nav-pills mb-3">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Link 1</a>
							<a class="dropdown-item" href="#">Link 2</a>
							<a class="dropdown-item" href="#">Link 3</a>
						</div>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>

				<ul class="nav nav-tabs">
					<li class="nav-item">
						<a class="nav-link active" href="#">Active</a>
					</li>
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Link 1</a>
							<a class="dropdown-item" href="#">Link 2</a>
							<a class="dropdown-item" href="#">Link 3</a>
						</div>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					</li>
					<li class="nav-item">
						<a class="nav-link disabled" href="#">Disabled</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">选项卡切换</h5>
			</div>
			<div class="card-body">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs" role="tablist">
					<li class="nav-item">
						<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
					</li>
				</ul>

				<!-- Tab panes -->
				<div class="tab-content">
					<div id="home" class="container tab-pane active">
						<br>
						<h3>HOME</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
							aliqua.
						</p>
					</div>
					<div id="menu1" class="container tab-pane fade">
						<br>
						<h3>Menu 1</h3>
						<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					</div>
					<div id="menu2" class="container tab-pane fade">
						<br>
						<h3>Menu 2</h3>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
					</div>
				</div>
			</div>
		</div>
		<!-- section -->
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">横栏导航</h5>
				<p>
					布局地址：
					<a href="http://hgtech.gitee.io/domoko2/">domoko2 </a>
				</p>
			</div>
			<div class="card-body">
				<ul class="list-unstyled nav row m-2" style="border-bottom:1px solid #e5e5e5 ">
					<li class="nav-item col">
						<a class=" active nav-link" href="#" title="">
							全部
						</a>
					</li>
					<li class="nav-item col">
						<a class="  nav-link" href="#" title="">
							item
						</a>
					</li>
					<li class="nav-item col">
						<a class="  nav-link" href="#" title="">
							item
						</a>
					</li>
					<li class="nav-item col">
						<a class="  nav-link" href="#" title="">
							item
						</a>
					</li>

				</ul>
				<div class="">
					<img class="img-fluid" src="../../img/girl2.jpg">
				</div>
			</div>
		</div>
		<!-- section end-->
		<!-- section -->
		<div class="card my-4">
			<div class="card-header">
				<h5 class="text-primary">竖栏导航</h5>
				<p>
					布局地址：
					<a href="http://hgtech.gitee.io/domoko2/">domoko2 </a>
				</p>
			</div>
			<div class="card-body">
				<div class="row">
					<ul class="list-unstyled nav row col-3" >
						<li class="nav-item col">
							<a class=" active nav-link" href="#" title="">
								全部
							</a>
						</li>
						<li class="nav-item col">
							<a class="  nav-link" href="#" title="">
								item
							</a>
						</li>
						<li class="nav-item col">
							<a class="  nav-link" href="#" title="">
								item
							</a>
						</li>
						<li class="nav-item col">
							<a class="  nav-link" href="#" title="">
								item
							</a>
						</li>
	
					</ul>
					<div class="col">
						<img class="img-fluid" src="../../img/girl2.jpg">
					</div>
				</div>
			</div>
		</div>
		<!-- section end-->
	</section>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
	<script src="../../js/page.js"></script>
	<script>
		$('.nav a').on('click', function (e) {
			e.preventDefault()
			$(this).tab('show')
		})
	</script>
</body>

</html>